<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>vue</title>
    <style>
        #app{
            display: flex;
            justify-content: center;
            flex:1;
        }
    </style>
  </head>
  <body>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <div id="app">
      <el-form @submit.native.prevent="register" style="width:25%;">
        <el-form-item label="用户名">
            <el-input v-model.lazy.trim="user.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input-number v-model="user.age" :min="1" :max="120" label="年龄"></el-input-number>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="user.gender">
                <el-radio v-for="item in GENDERS" :label="item.value" :key="item.value">{{item.title}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="国家">
           <el-select v-model="user.country" placeholder="--请选择--">
            <el-option v-for="country in COUNTRIES"
             :label="country.title"
             :value="country.value"
             :key="country.value"
            ></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="爱好">
            <el-checkbox 
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >全选</el-checkbox>
            <div style="margin:15px 0"></div>
            <el-checkbox-group v-model="user.hobbies" @change="handleCheckedChange">
                <el-checkbox v-for="hobby in HOBBIES" 
                :label="hobby.value" 
                :key="hobby.value">{{hobby.title}}</el-checkbox>
            </el-checkbox-group>
         </el-form-item>
         <el-form-item label="介绍">
           <el-input type="textarea" v-model="user.desc"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" native-type="submit">注册</el-button>
          </el-form-item>
      </el-form>
      <div style="width:25%;margin-left:20px;">
        <p>用户名:{{user.name}}</p>
        <p>邮箱:{{user.email}}</p>
        <p>密码:{{user.password}}</p>
        <p>年龄:{{user.age}}</p>
        <p>性别:{{user.gender}}</p>
        <p>国家:{{user.country}}</p>
        <p>爱好:{{user.hobbies}}</p>
        <p>介绍:{{user.desc}}</p>
      </div>
    </div>
    <script>
      const COUNTRIES = [//国家
        {value:'cn',title:"中国"},
        {value:'us',title:"美国"},
        {value:'uk',title:"英国"}
      ]
      const HOBBIES = [//爱好
        {value:'football',title:"足球"},
        {value:'basketball',title:"篮球"},
        {value:'baseball',title:"棒球"}
      ]
      const GENDERS = [//性别
        {value:'male',title:"男"},
        {value:'female',title:"女"}
      ]
      var vm = new Vue({
        el: "#app",
        data: {
          GENDERS,HOBBIES,COUNTRIES,
          user:{
            name:'',//用户名
            password:'',//密码
            email:'',//邮箱
            age:18,//年龄
            gender:'male',//性别 male 男 female女
            country:'cn',//国家 cn 中国
            hobbies:[],
            desc:''
          },
          checkAll:false,//是否全选中
          isIndeterminate:false//是否处于未定状态
        },
        methods:{
          register(){
            let {user} = this;
            console.log('提交用户:',user)
          },
          handleCheckAllChange(value){//value=true表示选中 value=false表示未选中
            //如果选中了，那说明要全选，否则，则全不选 
            this.user.hobbies=value?HOBBIES.map(item=>item.value):[];
            this.isIndeterminate = false;//把未定状态设置为false
          },
          handleCheckedChange(values){
            //获取选中的数量 2
            let checkedCount = values.length;
            //如果选中的数量和整个数组的数量相等，那就说明全选了
            this.checkAll=checkedCount===HOBBIES.length;
            this.isIndeterminate=checkedCount>0&&checkedCount<HOBBIES.length;
          }
        }
      });
    </script>
  </body>
</html>
